<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref">
    </div>
  </div>
</template>

<script>
import info from '@/api/staInfo'

export default {
  name: "Seller",
  data() {
    return {
      chartInstance: null,
      allDate: null,  //服务器返回的数据
      currentPage: 1, //当前显示的页数
      totalPage: 0,//页数
      timerId: null//定时器的标识
    }
  },
  mounted() {//dom渲染完成后
    this.initCharts()
    this.getData();
    //屏幕尺寸发生变化自动调用
    window.addEventListener('resize', this.screenAdapter)
    //在页面加载完成的时候，主动进行屏幕的适配
    this.screenAdapter()
  },
  //页面被销毁时取消定时器
  destroyed() {
    clearInterval(this.timerId)
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 初始化echartsInstance对象
    initCharts() {
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref)
      console.log(this.$refs.seller_ref)

      //对图表初始化配置的控制
      const initOption = {
        //标题属性
        title: {
          text: '  可出售机票统计',
          left: 'center'
        },

        //坐标轴属性
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true //距离是包含坐标轴上的文字 <个人理解：以坐标轴上的文字为界线>
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color:'#288df6',
              fontSize: "25",
              fontWeight:'bold'
            },
          },

        },
        yAxis: {
          type: 'category',
          //轴上样式
          axisLabel: {
            textStyle: {
              color:'#288df6',
              fontSize: "25",
              fontWeight:'bold'

            },
          },
        },
        tooltip: {
          trigger: 'axis',//坐标轴
          //鼠标跑到坐标轴上的样式
          axisPointer: {
            type: 'line',
            z: '0', // 样式显示的层级
            lineStyle: {
              // width: 66,
              color: '#f5f3f2'
            }
          }
        },
        series: [{
          type: 'bar',
          // barWidth: 60,
          //显示文字并现在在柱子右边
          label: {
            show: true,
            position: 'right',
            // 设置文字样式
            textStyle: {
              color: 'black',
              width: 66,

            }
          },
          //控制柱子的每一项
          itemStyle: {
            //控制四个角的原角度数，顺序：左上角 右上角，右下角，左下角
            // barBorderRadius: [0, 33, 90, 0],
            //线性渐变对象
            //指明颜色渐变的方向+指明不同百分比之下颜色的值
            //x1 y1两个点确定一条线  x2 x2同理  x1,y1, x2, y2, => 0,0,1,1,

            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
              //百分之0状态之下的颜色值
              {
                offset: 0,
                color: '#5052EE'
              },
              //百分之100状态之下的颜色值
              {
                offset: 1,
                color: '#AB6EE5'
              },
            ])
          }
        }]
      }
      this.chartInstance.setOption(initOption)
      // 对图表对象进行鼠标事件的监听
      //取消定时器
      this.chartInstance.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      //启动定时器
      this.chartInstance.on('mouseout', () => {
        this.startInterval()
      })
    },
    //获取服务器的数据
    // 为什么使用await，因为axios传过来的数据是promise对象  await能更快的解析  用了await 就得用 async
    async getData() {
      //  $http.get('seller')一开始出来的数据 有config 有data 有heads等
      // {data:ret}  把$http.get('seller')的数据 只拿了data 并给了ret这个对象
      await info.getPlaneCount()
        .then(response => {
          this.allDate = response.data.list
        })
      console.log(this.allDate)

      //对数组进行排序
      this.allDate.sort((a, b) => {
        return a.value - b.value  //从小到大的排序
      })
      // 每5个元素显示一页
      this.totalPage = this.allDate.length % 3 == 0 ?
        this.allDate.length / 3 :
        this.allDate.length / 3 + 1

      this.updateChart()
      //  启动定时器
      this.startInterval()
    },
    //更新图表
    updateChart() {
      const start = (this.currentPage - 1) * 3
      const end = this.currentPage * 3
      const showData = this.allDate.slice(start, end)

      const sellerNames = showData.map((item) => {
        return item.name
      })
      const sellValues = showData.map((item) => {
        return item.value
      })
      const dataOption = {
        yAxis: {
          data: sellerNames
        },
        series: [{
          data: sellValues,
        }]
      }
      this.chartInstance.setOption(dataOption)
    },
    //定时器控制分页刷
    startInterval() {
      if (this.timerId = null) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(() => {
        this.currentPage == 1,
          this.updateChart()
        //如果当前页超过或达到总页数，那么将当前页设为第一页
        if (this.currentPage >= this.totalPage) {
          this.currentPage = 1
        }
      }, 3000)
    },

    //  屏幕适配,当浏览器的大小发生变化的时候，会调用的方法，来完成屏幕的适配
    screenAdapter() {
      const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          },
        },
        tooltip: {
          //鼠标跑到坐标轴上的样式
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            }
          }
        },
        series: [{
          barWidth: titleFontSize,

          //控制柱子的每一项
          itemStyle: {
            //控制四个角的原角度数，顺序：左上角 右上角，右下角，左下角
            barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
          }

        }]
      }

      this.chartInstance.setOption(adapterOption)
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize()

    }
  }
}
</script>

<style scoped>
.com-container {
  width: 65%;
  height: 500px;
}

.com-chart {
  width: 100%;
  height: 100%;
}
</style>
